<template>
  <el-dropdown placement="top" @visible-change="visibleChange" @command="commandClick">
    <span class="el-dropdown-link">
      <el-avatar
        shape="circle"
        size="medium"
        fit="fill"
        :src="userInfo.avatar"
        style="transition: 0.2s;"
        :class="{'toolbar-avatar-hidden':toolbarAvatar}"
      ></el-avatar>
    </span>
    <el-dropdown-menu slot="dropdown" class="user-profile">
      <el-avatar
        shape="circle"
        :size="50"
        fit="fill"
        :src="userInfo.avatar"
        class="user-profile-avatar"
      ></el-avatar>
      <div class="user-profile-top">
        <div class="user-profile-name">{{userInfo.name}}</div>
        <div class="user-profile-vip">
          <a href="/vip" :class="'icon-vip-'+userInfo.vip"></a>
        </div>
      </div>
      <div class="user-profile-mid">
        <a href="/fans" class="user-profile-fans">
          <span>{{userInfo.count.fans}}</span>
          <span>粉丝</span>
        </a>
        <a href="/follow" class="user-profile-follow">
          <span>{{userInfo.count.follow}}</span>
          <span>关注</span>
        </a>
        <a href="/likes" class="user-profile-likes">
          <span>{{userInfo.count.likes}}</span>
          <span>点赞</span>
        </a>
      </div>
      <el-dropdown-item
        v-for="route in userRoutes"
        :key="route.path"
        :command="route.path"
        :divided="route.meta.underline"
      >{{route.meta.title}}</el-dropdown-item>
      <el-dropdown-item command="exit" :divided="true">退出</el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script lang='ts'>
import { Component, Vue } from "nuxt-property-decorator";

@Component
export default class extends Vue {
  toolbarAvatar: boolean = false;
  get userInfo() {
    return this.$store.state.navModule.userInfo;
  }
  get userRoutes() {
    return this.$store.state.navModule.userRoutes;
  }

  visibleChange() {
    this.toolbarAvatar = !this.toolbarAvatar;
  }
  commandClick(path: any) {
    path !== "exit" ? this["$router"].push(path) : console.log("logout");
  }
}
</script>

<style lang='less'>
.el-dropdown-menu {
  top: 36px !important;
}
.toolbar-avatar-hidden {
  opacity: 0;
}
.user-profile {
  width: 300px;
}
.user-profile-avatar {
  z-index: 1000;
  position: absolute;
  top: -30px;
  left: calc(50% - 25px);
}
.user-profile-top {
  .wh(auto, 100%);
  .flex-box(column);
  padding-top: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e8e8ed;
}
.user-profile-mid {
  .flex-box(row, space-around);
  padding: 5px;
  border-bottom: 1px solid #e8e8ed;
  a {
    .flex-box(column);
    .wh(50px, 60px);

    span:first-child {
      color: #000;
      font: 28px bold;
    }
    span:last-child {
      color: #999aaa;
      font-size: 12px;
    }
    &:hover {
      text-decoration: none;
    }
  }
}
.icon-vip-0 {
  display: block;
  .wh(47px, 20px);
  background: url("~@/assets/images/vip/no-vip.png");
  background-repeat: no-repeat;
  background-size: 100%;
}
</style>